<template>
	<view style="width: 100%;background-color: white;">
		<view style="width: 100%;min-height: 100vh;overflow-y: scroll;">


			<view class="top_bg" style="overflow-x: auto;margin-top: -10rpx;z-index: 10001;">
				<view class="" style="display: grid;">
					<view class="info_bg">
						<view class="info" style="display: flex;">
							<image :src="myInfo.img"
								style="margin:30rpx 30rpx;width: 100rpx;height: 100rpx;border-radius: 50%;">
							</image>
							<view style="display: grid;margin-top: 40rpx;height: 60px;">
								<view style="color: #1F2642;font-size: 16px;;height: 20px;font-weight: 600;">
									{{myInfo.name}}
								</view>
								<view style="color: #6D6D6D;font-size: 12px;height: 24px;">
									{{myInfo.isVip == false ? '你还不是会员，开通尊享各项权益' :myInfo.expire_date}}
								</view>
							</view>
						</view>
					</view>
					<!-- <uni-notice-bar text="这是一条滚动公告，可用于跑马灯效果。" scrollable :speed="100" @click="handleClick" /> -->
					<view
						style="overflow-x: auto;margin-top: 10rpx;width: 100%;height: 100%;background-color: white;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
						<view style="">
							<scroll-view class="member" scroll-x="true" scroll-left="20">
								<view v-for="(item,index) in vipMenus" :key="index" class="item"
									style="margin: 20rpx 10rpx;border-radius: 16px;" @click="selectedMember(index)"
									:class="selectedIndex == index ? 'selectedClass' : 'noselectedClass'">

									<view style="display: table;text-align: center;width: 100%;">
										<view v-show="item.tuijian == '1'" class="tuijianlabel">推荐</view>
										<view :style="item.tuijian == '1' ? 'margin-top: 10px': 'margin-top: 23px' "
											style="text-align: center;color: #1F2642 ;font-size: 30rpx;font-weight: 550;">
											{{item.vip_name}}
										</view>
										<view style="display: flex;width: 100%;justify-content: center;">
											<view :class="selectedIndex == index ? 's_priceColor':'n_priceColor'"
												style="font-size: 24rpx;margin-top: 10rpx;font-weight: 550;">
												¥ <span style="font-size: 42rpx;margin-top: 20px;font-weight: 600;">
													{{item.activity_price}}
												</span></view>
										</view>

										<view style="text-align: center;margin-top: 7px;font-size: 12px;"
											v-if="  item.describe == '1'  ">
											{{item.vip_desc}}
										</view>
										<view
											style="text-align: center;margin-top: 7px;text-decoration:line-through;color:#9D9D9D;font-size: 12px;"
											v-else>
											{{'￥' + item.price}}
										</view>
									</view>
								</view>
							</scroll-view>
							<view class="buyBtn" style="text-align: center;" @click="goBuy()">
								{{myInfo.isVip == false ? '立即购买' :'立即续费'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 			<view>
				<view v-for="(item,index) in introImages1" :style="index == 0 ? '':{'margin-top':-20 + 'rpx'}">
					<view style="display: grid;grid-template-areas: 'stack'; ">

						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
				<view class="" style="background-color: white;width: 100%;">
					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in members1"
							style="width: 50%;margin-top: -20rpx;display: grid;grid-template-areas: 'stack'; ">
							<image :src="item" style="width:100%;grid-area: stack;" mode="widthFix">
							</image>
							<view
								style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 0rpx;">
								<image :src="buybtn" style="width: 200rpx;grid-area: stack;" mode="widthFix"
									@click="buyNow(index)"
									:style="index%2 == 0 ? {'margin-left':20+'rpx'}:{'margin-right':20+'rpx'}">
								</image>
							</view>

						</view>
					</view>
				</view>
				<view v-for="(item,index) in introImages2" style="margin-top: -10rpx;">
					<view style="display: grid;grid-template-areas: 'stack'; ">

						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
				<view class="" style="background-color: white;width: 100%;">
					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in members2"
							style="width: 50%;margin-top: -20rpx;display: grid;grid-template-areas: 'stack'; ">
							<image :src="item" style="width:100%;grid-area: stack;" mode="widthFix">
							</image>
							<view
								style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 0rpx;">
								<image :src="buybtn" style="width: 200rpx;grid-area: stack;" mode="widthFix"
									@click="buyNow(index)"
									:style="index%2 == 0 ? {'margin-left':20+'rpx'}:{'margin-right':20+'rpx'}">
								</image>
							</view>

						</view>
					</view>
				</view>
				<view v-for="(item,index) in introImages3" style="margin-top: -12rpx;">
					<view style="display: grid;grid-template-areas: 'stack'; ">
						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
						</view>

						<view v-if="index == 0"
							style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 40rpx;">
							<image :src="lqyh" style="width: 360rpx;" mode="widthFix" @click="showPop()">
							</image>
						</view>
					</view>
				</view>
			</view> -->
			<view style="margin: 10rpx 0 0 0;border-radius: 30rpx;width: calc(100% - 0rpx);">
				<view v-for="(item,index) in introImages" style="margin-top: -30rpx;">
					<view style="display: grid;grid-template-areas: 'stack'; ">

						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
							<image :src="lookMore" style="width: 160rpx;" mode="widthFix" v-if="index == 0"
								class="lookmore" @click="viewMore()"></image>

						</view>

						<view v-if="index == 0"
							style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 130rpx;">

							<view class="zhuanshu-container">
								<image v-for="(zz,k) in zhuanshuImages" :src="zz" mode="widthFix"
									@click="zhuanshuClick(k)">
								</image>
							</view>
						</view>

						<view v-if="index == 1"
							style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 50rpx;">

							<view class="image-container">
								<image v-for="(url,i) in quanyiImages" :src="url" mode="widthFix"
									@click="quanyiClick(i)">
								</image>
							</view>
						</view>
						<view v-if="index == 2"
							style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 50rpx;">

							<view class="image-container">
								<image v-for="(purl,j) in plusImages" :src="purl" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 400rpx;">
			</view>
		</view>

		<view v-show="scrollDistance > 300"
			style="position: fixed;bottom: 0;left:0;overflow-x: auto;width: 100%;height: 410rpx;background-color: white;">
			<view style="">
				<view style="width: 100%;height: 60rpx;text-align: center;" @click="backToTop()">
					<image style="width: 40rpx;height: 40rpx;margin-top: 10rpx;"
						src="../../static/images/app_member/arrowUp.png" alt="" />
				</view>
				<scroll-view class="member1" scroll-x="true" scroll-left="20">
					<view v-for="(item,index) in vipMenus" :key="index" class="item1"
						style="margin: 20rpx 10rpx;border-radius: 16px;" @click="selectedMember(index)"
						:class="selectedIndex == index ? 'selectedClass' : 'noselectedClass'">

						<view style="display: table;text-align: center;width: 100%;">
							<view v-show="item.tuijian == '1'" class="tuijianlabel">推荐</view>
							<view :style="item.tuijian == '1' ? 'margin-top: 10px': 'margin-top: 23px' "
								style="text-align: center;color: #1F2642 ;font-size: 30rpx;font-weight: 550;">
								{{item.vip_name}}
							</view>
							<view style="display: flex;width: 100%;justify-content: center;">
								<view :class="selectedIndex == index ? 's_priceColor':'n_priceColor'"
									style="font-size: 24rpx;margin-top: 10rpx;font-weight: 550;">
									¥ <span style="font-size: 42rpx;margin-top: 20px;font-weight: 600;">
										{{item.activity_price}}
									</span></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="buyBtn1" style="text-align: center;" @click="goBuy()">
					{{myInfo.isVip == false ? '立即购买' :'立即续费'}}
				</view>
			</view>
		</view>
		<delayPop ref="vipPop"></delayPop>
	</view>
</template>
<script>
	const comUrl =
		"https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/%E6%8E%A8%E8%8D%90%E6%B4%BB%E5%8A%A8/";
	import {
		getMyHome,
		getVipTypeList,
		getVipRenewStatus,
		addClickRecord,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import delayPop from './components/delayPop.vue';
	import animationType from '@/utils/animationType.js'
	const app = getApp();
	export default {
		components: {
			delayPop
		},
		data() {
			return {
				lqyh: comUrl + 'lqyh.png',
				buybtn: comUrl + 'buybtn.png',
				introImages1: [
					comUrl + 'member_top.jpg'
				],
				introImages2: [
					comUrl + 'aaa_03.jpg'
				],
				introImages3: [
					comUrl + 'aaa_02.jpg'
				],
				members1: [
					comUrl + 'member_01.jpg', comUrl + 'member_02.jpg',
					comUrl + 'member_03.jpg',
					comUrl + 'member_04.jpg',
				],
				members2: [
					comUrl + 'member_05.jpg', comUrl + 'member_06.jpg',
					comUrl + 'member_07.jpg',
					comUrl + 'member_08.jpg',
				],
				myInfo: {},
				vipMenus: [],
				selectedIndex: 0,
				zhuanshuImages: ['../../static/images/app_newMember/zhuanshu_01.png',
					'../../static/images/app_newMember/zhuanshu_02.png',
					'../../static/images/app_newMember/zhuanshu_03.png'
				],
				introImages: ['../../static/images/app_newMember/v_01.jpg', '../../static/images/app_newMember/v_02.jpg',
					'../../static/images/app_newMember/v_03.jpg', '../../static/images/app_newMember/v_04.jpg'
				],
				quanyiImages: ['../../static/images/app_newMember/quanyi_01.png',
					'../../static/images/app_newMember/quanyi_02.png',
					'../../static/images/app_newMember/quanyi_03.png'
				],
				plusImages: ['../../static/images/app_newMember/plus_01.png',
					'../../static/images/app_newMember/plus_02.png',
					'../../static/images/app_newMember/plus_03.png'
				],
				lookMore: '../../static/images/app_newMember/lookmore.png',
				userId: '',
				source: '2',
				token: '',
				scrollDistance: 0,
				platform: uni.getSystemInfoSync().platform, //手机类型
			}
		},
		onLoad(options) {
			let that = this;
		},
		onShow: function() {
			let that = this;

		},
		mounted: function() {
			let that = this;

			let locatiojUrl = window.location.href;

			//let locatiojUrl =
			//	'http://10.10.8.15:8080/qz/?phone=15564515660&token=1202bdc5effd1ecbbd447deec7a6f78b&userId=337538&source=2';

			//let locatiojUrl =
			//	'https://mayimae.com/qz/pages/app_member/index?userId=337538';

			//let phone = decodeURI(that.jqueryUrl(locatiojUrl).phone);
			that.userId = decodeURI(that.jqueryUrl(locatiojUrl).userId);
			//that.source = decodeURI(that.jqueryUrl(locatiojUrl).source);
			//that.token = decodeURI(that.jqueryUrl(locatiojUrl).token);


			loginMobile({
					phone: '13012562102',
					captcha: '000000',
					spread_spid: 10001
				})
				.then(res => {
					let data = res.data;
					let newTime = Math.round(new Date() / 1000);
					that.$store.commit("LOGIN", {
						'token': res.data.token
					});
					that.$store.commit("SETUID", res.data.uid);

					that.getMyHome();
					that.getVipTypeList();

					let pp = {};
					pp.userId = that.userId;
					pp.token = that.token;
					pp.platform = that.platform == 'ios' ? '苹果' : '安卓';
					pp.type = '进入付费会员页';
					addClickRecord(pp).then(res => {

					})

				})
				.catch(res => {
					that.$util.Tips({
						title: res
					});
				});
		},
		onPageScroll(e) {
			let that = this;
			that.scrollDistance = e.scrollTop;
		},
		methods: {
			buyNow(i) {
				console.log(i);
				let that = this;
				let price = 0;
				let vipId = 0;
				if (i == 0) {
					price = 1699;
					vipId = 10003;
				} else if (i == 1) {
					price = 699;
					vipId = 10000;
				} else if (i == 2) {
					price = 399;
					vipId = 10002;
				} else if (i == 3) {
					price = 199;
					vipId = 10001;
				}
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/CouponOrder/index?id=' + vipId + '&price=' + price +
						'&userId=' + that
						.userId +
						'&source=' + that.source +
						'&orderType=' + '会员',
				})
			},
			showPop() {
				let that = this;
				that.$refs.vipPop.showPop();
			},
			handleClick() {
				console.log('公告栏被点击');
			},
			// 返回顶部
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			viewMore() {
				let that = this;
				let platform = uni.getSystemInfoSync().platform; //手机类型
				if (platform == 'ios') {
					window.webkit.messageHandlers.viewMore.postMessage("");
				}
				if (platform == 'android') {
					window.location.href = 'viewMore';
				}
			},
			zhuanshuClick(i) {
				let that = this;
				let platform = uni.getSystemInfoSync().platform; //手机类型
				if (platform == 'ios') {
					if (i == 0) {
						const handler = window.webkit.messageHandlers.basicCourse;
						if (handler) {
							handler.postMessage({
								"couId": '68'
							});
						}
					} else if (i == 1) {
						const handler = window.webkit.messageHandlers.takePortraits;
						if (handler) {
							handler.postMessage({
								"couId": '66'
							});
						}
					} else if (i == 2) {
						const handler = window.webkit.messageHandlers.monetizationCourse;
						if (handler) {
							handler.postMessage({
								"couId": '10099'
							});
						}
					}
				}

				if (platform == 'android') {
					if (i == 0) {
						window.location.href = 'basicCourse?couId=68';
					} else if (i == 1) {
						window.location.href = 'takePortraits?couId=66';
					} else if (i == 2) {
						window.location.href = 'monetizationCourse?couId=10099';
					}
				}
			},
			quanyiClick(i) {
				let that = this;
				let platform = uni.getSystemInfoSync().platform; //手机类型

				if (i == 0 || i == 1) {
					if (platform == 'ios') {
						if (i == 0) {
							const handler = window.webkit.messageHandlers.photographyBook;
							if (handler) {
								handler.postMessage('');
							}
						} else if (i == 1) {
							const handler = window.webkit.messageHandlers.photoCritique;
							if (handler) {
								handler.postMessage('');
							}
						}
					}

					if (platform == 'android') {
						if (i == 0) {
							window.location.href = 'photographyBook';
						} else if (i == 1) {
							window.location.href = 'photoCritique';
						}
					}
				} else { //i == 2 //是会员跳微信 不是会员弹窗提示购买会员
					console.log('------' + platform)
					if (that.myInfo.isVip == false) {
						console.log(that.myInfo.isVip)
						uni.showModal({
							title: '您还不是会员',
							content: '开通会员享受老师免费点评',
							confirmText: '立即开通', // 修改按钮文字
							cancelText: '返回',
							confirmColor: '#FF0000', // 仅微信小程序、H5生效（确认按钮颜色）
							cancelColor: '#333333', // 仅微信小程序、H5生效（取消按钮颜色）
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确认');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						if (platform == 'ios') {
							window.webkit.messageHandlers.goWechat.postMessage("");
						}
						if (platform == 'android') {
							window.location.href = 'goWechat';
						}
					}
				}
			},
			handleScroll(e) {
				//console.log('scroll-view 滚动距离:', e.detail.scrollTop)
				let that = this;
				that.scrollDistance = e.detail.scrollTop;
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
			goBuy() {
				let that = this;

				let pp = {};
				pp.userId = that.userId;
				pp.token = that.token;
				pp.platform = that.platform == 'ios' ? '苹果' : '安卓';
				pp.type = '会员页立即购买';
				addClickRecord(pp).then(res => {

				})


				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				p.platform = that.platform == 'ios' ? '苹果' : '安卓';
				p.vipId = that.vipMenus[that.selectedIndex]
					.id;
				getVipRenewStatus(p).then(res => {
					console.log(res.code)
					console.log(res.msg)
					if (res.code == 0) {
						// uni.navigateTo({
						// 	animationType: animationType.type,
						// 	animationDuration: animationType.duration,
						// 	url: '/pages/app_orderMember/index?id=' + that.vipMenus[that.selectedIndex]
						// 		.id + '&price=' + that.vipMenus[that.selectedIndex].activity_price +
						// 		'&userId=' + that
						// 		.userId +
						// 		'&source=' + that.source,
						// })
						uni.navigateTo({
							animationType: animationType.type,
							animationDuration: animationType.duration,
							url: '/pages/CouponOrder/index?id=' + that.vipMenus[that.selectedIndex]
								.id + '&price=' + that.vipMenus[that.selectedIndex].activity_price +
								'&userId=' + that
								.userId +
								'&source=' + that.source +
								'&orderType=' + '会员',
						})
						// uni.navigateTo({
						// 	animationType: animationType.type,
						// 	animationDuration: animationType.duration,
						// 	url: '/pages/CouponOrder/index?id=' + vipId + '&price=' + price +
						// 		'&userId=' + that
						// 		.userId +
						// 		'&source=' + that.source +
						// 		'&orderType=' + '会员',
						// })
					} else {
						that.$util.Tips({
							title: res.msg
						});
					}
				})
			},
			getMyHome() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getMyHome(p).then(res => {
					that.myInfo = res.data;
					//that.myInfo.isVip = true;
				})
			},
			getVipTypeList() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getVipTypeList(p).then(res => {
					that.vipMenus = [];
					that.vipMenus = res.data;

					for (let i = 0; i < that.vipMenus.length; i++) {
						if (that.vipMenus[i].tuijian == '1') {
							that.selectedIndex = i;
							console.log('selectedIndex== ' + that.selectedIndex);
						}
					}

				})
			},
			selectedMember(index) {
				let that = this;
				that.selectedIndex = index;
				let type = '';
				if (that.vipMenus[index].duration == '三天') {
					type = '会员-3天体验会员';
				}
				if (that.vipMenus[index].duration == '一个月') {
					type = '会员-月会员';
				}
				if (that.vipMenus[index].duration == '三个月') {
					type = '会员-季度会员';
				}
				if (that.vipMenus[index].duration == '永久') {
					type = '会员-永久会员';
				}
				if (that.vipMenus[index].duration == '一年') {
					type = '会员-年会员';
				}
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				p.platform = that.platform == 'ios' ? '苹果' : '安卓';
				p.type = type;
				addClickRecord(p).then(res => {

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.firstbg {
		position: relative;
		display: inline-block;
		/* 确保容器适应图片大小 */
	}

	.lookmore {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
	}

	.zhuanshu-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 0rpx;
		/* 图片之间的间距，可选 */
	}

	.zhuanshu-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}

	.image-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 40rpx;
		/* 图片之间的间距，可选 */

	}

	.image-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}

	.selectedClass {
		border: 2px solid #F97819;
		// border-image: linear-gradient(270deg, rgba(249, 114, 18, 1), rgba(255, 188, 32, 1)) 2 2;
		// background-image: linear-gradient(270deg, #F97212 0%, #FFBC20 100%);
		background-color: #FEF1E7;
		border-radius: 12px;
		opacity: 1;
		color: #FF3948;
	}

	.noselectedClass {
		background-color: #F8F8F8;
		border: 2px solid #FFFFFF;
		border-radius: 12px;
		opacity: 1;
		color: #FF3948;
	}

	.tuijianlabel {
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		width: 100rpx;
		background-color: #FF3948;
		border-top-left-radius: 14px;
		border-bottom-right-radius: 14px;
		height: 30rpx;
		margin-top: -1px;
	}

	.xingjiabilabel {
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		width: 160rpx;
		background-color: #FF3948;
		border-top-left-radius: 14px;
		border-bottom-right-radius: 14px;
		height: 30rpx;
		margin-top: -1px;
	}

	.s_priceColor {
		color: #FF3948;
	}

	.n_priceColor {
		color: #FF7B00;
	}

	.fuliname {
		color: #955A00;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.fulisubname {
		color: #955A00;
		font-size: 24rpx;
		font-weight: 100;
		margin-top: 0rpx;
		margin-left: 20rpx;
	}

	.fulibtnname {
		color: #6C3B00;
		font-size: 22rpx;
		margin-top: -5rpx;
		margin-left: 20rpx;
		width: 80px;
		height: 30px;
		background: linear-gradient(270deg, #F3CA5E 0%, #FFDD84 100%);
		border-radius: 24px 24px 24px 24px;
		text-align: center;
		line-height: 30px;
	}

	.fulibtnname2 {
		color: #FFFFFF;
		font-size: 22rpx;
		margin-top: 0rpx;
		margin-left: 20rpx;
		width: 80px;
		height: 30px;
		background: #EA554F;
		border-radius: 24px 24px 24px 24px;
		text-align: center;
		line-height: 30px;

	}

	.text-wrap {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		width: 180rpx;
	}

	.top_bg {
		width: 100%;
		height: 420rpx;
		background-image: url('~@/static/images/app_member/top_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: table;
	}

	.info_bg {
		margin: 20rpx;
		width: calc(100% - 40rpx);
		height: 160rpx;
		background-image: url('~@/static/images/app_member/info_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: grid;
	}

	.fuli1 {
		margin: 20rpx;
		width: 220rpx;
		height: 220rpx;
		background-image: url('~@/static/images/app_member/f1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.fuli2 {
		margin: 20rpx;
		width: 220rpx;
		height: 220rpx;
		background-image: url('~@/static/images/app_member/f2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.fuli3 {
		margin: 20rpx;
		width: 220rpx;
		height: 220rpx;
		background-image: url('~@/static/images/app_member/f3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.member {
		white-space: nowrap;
		width: 100%;
		margin-top: 10rpx;

		.item {
			width: 200rpx;
			height: 242rpx;
			display: inline-block;
			margin-right: 10rpx;
			align-items: center;
			justify-content: center;
			border-radius: 12rpx;
		}
	}

	.member1 {
		white-space: nowrap;
		width: 100%;
		margin-top: 0rpx;

		.item1 {
			width: 200rpx;
			height: 200rpx;
			display: inline-block;
			margin-right: 10rpx;
			align-items: center;
			justify-content: center;
			border-radius: 12rpx;
		}
	}



	.buyBtn {
		margin: 0rpx 30rpx 20rpx 30rpx;
		width: calc(100% - 60rpx);
		height: 44px;
		background: linear-gradient(90deg, #FEDE88 0%, #F2CA5B 100%);
		border-radius: 32px 32px 32px 32px;
		line-height: 44px;
		color: #653D00;
		font-size: 32rpx;
		font-weight: 600;
	}

	.buyBtn1 {
		margin: 0rpx 30rpx;
		width: calc(100% - 60rpx);
		height: 44px;
		background: linear-gradient(90deg, #FEDE88 0%, #F2CA5B 100%);
		border-radius: 32px 32px 32px 32px;
		line-height: 44px;
		color: #653D00;
		font-size: 32rpx;
		font-weight: 600;
	}

	.yuanjiao {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
</style>